<template>
  <div class="setting" id="setting">
    <!-- 烟支设置 -->
    <div class="herder">
      <div class="title df jc-sb w100">
        <h2>评吸名称：{{info.meetingName}}</h2>
        <div>
          <!-- <lay-button size="sm" @click="end_px" v-if="title=='开始任务'">结束评吸</lay-button>
          <lay-button size="sm" @click="close">关闭</lay-button> -->
          <lay-button @click="end_px" v-if="title=='开始任务'" class="layui-btn layui-bg-red">结束评吸</lay-button>
          <lay-button @click="close" class="layui-btn layui-bg-blue">关闭</lay-button>
        </div>
      </div>
      <h4><span>评吸时间：{{info.meetingTime}}</span></h4>
      <!-- <div class="id"><span>评吸ID：{{info.id}}</span> <span>评吸时间：{{info.meetingTime}}</span></div> -->
      <!-- <ul class="df ai-c type">
        评吸任务：
        <li v-for="item in info.meetingAllRepList" :key="item.id">{{taskArr[item.classify]}}</li>
      </ul> -->
    </div>
    <div class="content">
      <ul>
        <li v-for="item in info.meetingAllRepList" :key="item.id" @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)" @click="smoke_setting(item)">
          <div :class="['mouse-enter' ,'df-c'] " ref="mouse_start" v-if="nowId==item.id" @click.stop="start_smoke(item)">
            <span v-if="item.status == '0'"> {{ '开始评吸'}}</span>
            <div class="w100 h100 status-1" v-else-if="item.status == '1'|| item.status == '2'">
              <span @click.stop="mouse_screen(item)">投屏</span><span @click.stop="mouse_detail(item)">详情</span>
            </div>
          </div>
          <div class="content-out" v-else>

            <div>{{  taskArr[item.classify]}}</div>
            <div>{{  taskEn[item.classify]}}</div>

          </div>
          <div>
            <img src="@/assets/image/metting/month.png" alt="">
          </div>

          <div class="content-status" :style="{color:item.status==0?'red': item.status==1?'#ffb300':'#36b368'}" v-if="nowId!=item.id && title!='评吸烟支设置'">{{ item.status==0?'未开始': item.status==1?'进行中':'已完成' }}
          </div>
        </li>
        <!-- 签到表 -->
        <li @click="to_sign">
          <div>
            <div>签到表</div>
            <div>Sign-in-Sheet</div>
          </div>
          <div>
            <img src="@/assets/image/metting/month.png" alt="">
          </div>
        </li> 
      </ul>
    </div>

    <!-- 签到表设置 -->
    <el-dialog :append-to-body="false" ref="myDialog" v-model="dialogVisible" width="100%" :show-close="false">
      <div class="sign-setting">
        <h1 class="df w100 jc-sb">签到表设置

          <span style="margin-right: 50px;">
            <el-button @click="sign_close">取消</el-button>
            <el-button type="primary" @click="sign_enter">
              保存
            </el-button>
          </span>
        </h1>

        <div>

        </div>
        <div class=" content">
          <table border>
            <tr>
              <td>评委检验目的</td>
              <td colspan="4"><input type="text" v-model="signFrom.objective" name="" id="" placeholder="请输入....."></td>
            </tr>
            <tr>
              <td>会议组织部门</td>
              <td colspan="2">
                <lay-select v-model="signFrom.orgId" placeholder="请选择....." style="border: 0 none;width: 100%;height: 100%;" size="sm" class="selece">
                  <lay-select-option v-for="item in orgList" :value="item.orgId" :key="item.orgId" :label="item.orgName"></lay-select-option>
                </lay-select>
                <!-- <input type="text" v-model="signFrom.orgId" name="" id="" placeholder="请输入....."> -->
              </td>
              <td>主持人</td>
              <td><input v-model="signFrom.host" type="text" name="" id="" placeholder="请输入....."></td>
            </tr>
            <tr>
              <td>评吸时间</td>
              <td colspan="2">
                <!-- <input type="text" v-model="signFrom.meetingTime" name="" id="" placeholder="请输入....."> -->
                <!-- <input type="datetime-local"> -->
                <lay-date-picker type="datetime" v-model="signFrom.meetingTime" placeholder="请选择....." size="sm" class="time"></lay-date-picker>
              </td>
              <td>评吸地点</td>
              <td><input type="text" v-model="signFrom.location" name="" id="" placeholder="请输入....."></td>
            </tr>
            <tr>
              <td>评吸种类</td>
              <td colspan="2">单料烟</td>
              <td colspan="2">成品烟</td>
            </tr>

            <tr>
              <td>评吸数量(支)</td>
              <td colspan="2">
                <!-- <input type="text" v-model="signFrom.unblendedAmout" name="" id="" placeholder="请输入....."> -->
                <el-input v-model="signFrom.unblendedAmout" :step="1" type="number" placeholder="请输入整数" />
              </td>
              <td colspan="2">
                <el-input v-model="signFrom.perfectAmount" :step="1" type="number" placeholder="请输入整数" />
                <!-- <input type="text" v-model="signFrom.perfectAmount" name="" id="" placeholder="请输入....."> -->
              </td>
            </tr>

          </table>
        </div>
      </div>

      <!-- <template #footer>
        <div style="margin-right: 50px;">
          <el-button @click="sign_close">取消</el-button>
          <el-button type="primary" @click="sign_enter">
            保存
          </el-button>
        </div>
      </template> -->
    </el-dialog>

    <!-- 对比评吸设置 -->
    <!-- <el-dialog :append-to-body="false" ref="d_Dialog" v-model="d_dialogVisible" width="100%" :show-close="false">
      <DbSetting :top_title="top_title" :top_list="top_list" />
      <template #footer>
        <div style="margin-right: 50px;">
          <el-button @click="d_dialogVisible = false">取消</el-button>
          <el-button type="primary">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog> -->

    <!-- 三点评吸设置 -->
    <!-- <el-dialog :append-to-body="false" ref="d_Dialog" v-model="s_dialogVisible" width="100%" :show-close="false">
      三点评吸设置哦
      <template #footer>
        <div style="margin-right: 50px;">
          <el-button @click="s_dialogVisible = false">取消</el-button>
          <el-button type="primary">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog> -->

    <!-- 竞价评吸 -->
    <!-- <el-dialog :append-to-body="false" ref="d_Dialog" v-model="j_dialogVisible" width="100%" :show-close="false">
      竞价评吸设置哦
      <template #footer>
        <div style="margin-right: 50px;">
          <el-button @click="j_dialogVisible = false">取消</el-button>
          <el-button type="primary">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog> -->
    <!-- 单料评吸 -->
    <!-- <el-dialog :append-to-body="false" ref="d_Dialog" v-model="dl_dialogVisible" width="100%" :show-close="false">
      单料评吸设置哦
      <template #footer>
        <div style="margin-right: 50px;">
          <el-button @click="dl_dialogVisible = false">取消</el-button>
          <el-button type="primary">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup lang="ts">
import http from "@/http/index";
import { nextTick, onMounted, ref } from "vue";
import { layer } from "@layui/layui-vue";
import { useRoute, useRouter } from "vue-router";
import DbSetting from "./px_setting/db.vue";
import { color } from "echarts";
const router = useRouter();
const route = useRoute();
const id = ref(route.query.id);
const title = ref(route.query.title);
const taskArr = ref(["单点评吸", "对比评吸", "三点评吸", "竞品评价", "单料评吸", "对比排序"]);
const taskEn = ref([
  "Single point review and absorption",
  "Contrast  Smoke panel Test",
  "Three-point  Smoke panel Test",
  "Competitive Product evaluation",
  "Monthly  Smoke panel Test",
  "Comparative sorting",
]);

// 页面初始化数据
const info = ref<any>([]);
onMounted(() => {
  console.log(id.value);
  get_mett_detail(id.value);
});

// 关闭
const close = () => {
  // router.go(-1);
  router.push("/smokePanel/metting");
};

// 当前鼠标进入的id
const nowId = ref();
const mouse_start = ref(null);
// 鼠标进入
const mouseenter = (item) => {
  if (title.value == "开始任务") {
    nowId.value = item.id;
  } else if (title.value == "查看任务") {
    nowId.value = item.id;
    item.isStatus = "1";
  }
};
// 鼠标离开
const mouseleave = (item) => {
  nowId.value = "";
};

// 开始评吸、
const start_smoke = async (item) => {
  console.log(item);

  layer.confirm("确认要开始评吸吗", {
    btn: [
      {
        text: "确认",
        callback: async (closeid) => {
          const res = await http.corsApi(`/smokeMeeting/startSmoke?meetingId=${item.meetingId}&classify=${item.classify}`, "put", {
            meetingId: item.meetingId,
            classify: item.classify,
          });
          if (res.data) {
            layer.msg("开始成功", { icon: 1, time: 1500 });
            await get_mett_detail(id.value);
          }
          console.log(res);

          layer.close(closeid);
        },
      },
      {
        text: "取消",
        callback: (id) => {
          // layer.msg("坐着看");
          layer.close(id);
        },
      },
    ],
  });

  // if (nowId.value == item.id) {
  //   console.log(item);
  //   item.isStatus = "1";
  // }
};
// 结束评吸
const end_px = async () => {
  layer.confirm("确认要结束任务吗", {
    title: "提示",
    btn: [
      {
        text: "确认",
        callback: async (confirmid) => {
          const res = await http.corsApi(`/smokeMeeting/endTask/${id.value}`, "put", { id: id.value });
          console.log(res);
          if (res.data) {
            layer.close(confirmid);
            router.push("/smokePanel/metting");
            layer.msg("结束评吸成功", { time: 1500, icon: 1 });
          }
        },
      },
      {
        text: "取消",
        callback: (id) => {
          layer.close(id);
        },
      },
    ],
  });
};

const dialogVisible = ref(false);
// 投屏
const mouse_screen = (row) => {
  console.log("投屏", row);
  // dialogVisible.value = true;

  let url = "";
  let title = "";
  if (row.classify == "0") {
    url = "/smokeMeeting/monthlyScreen";
    title = "单点评吸完成情况";
  } else if (row.classify == "1") {
    url = "/smokeMeeting/contrastScreen";
    title = "对比评吸完成情况";
  } else if (row.classify == "2") {
    url = "/smokeMeeting/threePointScreen";
    title = "三点评吸完成情况";
  } else if (row.classify == "3") {
    url = "/smokeMeeting/competitorstScreen";
    title = "竞品评价完成情况";
  } else if (row.classify == "4") {
    url = "/smokeMeeting/unblendedScreen";
    title = "单料评吸完成情况";
  } else if (row.classify == "5") {
    // smokeMeeting/contrastSortScreen
    url = "/smokeMeeting/contrastSortScreen";
    title = "对比排序完成情况";
  }

  router.push(`/smokePanel/metting/screen?id=${row.id}&url=${url}&title=${title}`);
};
// 详情
const mouse_detail = (row) => {
  console.log("详情", row);
  // dialogVisible.value = true;

  if (row.classify == "0") {
    router.push(`/smokePanel/metting/detail?id=${row.id}`);
  } else if (row.classify == "1") {
    router.push(`/smokePanel/metting/db/detail?id=${row.id}`);
  } else if (row.classify == "2") {
    router.push(`/smokePanel/metting/sd/detail?mettingID=${id.value}&id=${row.id}&title=${route.query.title}`);
  } else if (row.classify == "3") {
    router.push(`/smokePanel/metting/jp/detail?mettingID=${id.value}&id=${row.id}`);
  } else if (row.classify == "4") {
    router.push(`/smokePanel/metting/dl/detail?mettingID=${id.value}&id=${row.id}`);
  } else if (row.classify == "5") {
    router.push(`/smokePanel/metting/comRank/detail?mettingID=${id.value}&id=${row.id}`);
  }
};

// 对比评吸弹层
const d_dialogVisible = ref(false);
const j_dialogVisible = ref(false);
const s_dialogVisible = ref(false);
const dl_dialogVisible = ref(false);

const top_title = ref("");

const top_list = ref([
  {
    name: "单位(部门)",
    content: "许昌卷烟厂",
    id: 1,
  },
  {
    name: "时间",
    content: new Date().toLocaleString(),
    id: 2,
  },
  {
    name: "编号",
    content: "Q/HNZY 101.3 001-15",
    id: 3,
  },
]);
// 烟支设置
const smoke_setting = (item: any) => {
  // console.log(item);
  // ?  classify? [0,1,2,43.4] ===> (["单点评吸", "对比评吸", "三点评吸", "竞品评价", "单料评吸"]);
  if (title.value === "评吸烟支设置") {
    // router.push("/smoke/pingxisetting");

    if (item.classify == 0) {
      //月度平息
      router.push("/smoke/month?id=" + item.id);
    } else if (item.classify == 1) {
      //对比评吸
      // top_title.value = '对比平息设置'
      // d_dialogVisible.value = true;
      router.push("/smoke/db?id=" + item.id);
    } else if (item.classify == 2) {
      //三点评吸
      // s_dialogVisible.value = true;
      router.push("/smoke/sd?id=" + item.id);
    } else if (item.classify == 3) {
      //竞价·评吸
      // j_dialogVisible.value = true;
      router.push("/smoke/jp?id=" + item.id);
    } else if (item.classify == 4) {
      //单料评吸
      // dl_dialogVisible.value = true;
      router.push("/smoke/dl?id=" + item.id);
    } else if (item.classify == 5) {
      router.push("/smoke/comRank?id=" + item.id);
    }
  }
};

// 签到表  /smoke/signtable
const to_sign = async () => {
  if (route.query.title === "评吸烟支设置") {
    await get_org_list_tree();
    dialogVisible.value = true;

    // router.push(`/smoke/signtable?mettingId=${id.value}`);
  } else if (route.query.title === "开始任务" || route.query.title === "查看任务") {
    console.log("kaishi1renwy1");
    // await get_org_list_tree();
    // dialogVisible.value = true;
    router.push("/startTask/sign?mettingID=" + id.value + "&title=" + route.query.title);
  }

  console.log(title.value);
  console.log(route.query.title);
};

// 签到表from
const signFrom = ref({
  host: "",
  location: "",
  meetingId: 0,
  meetingTime: "",
  number: "",
  objective: "",
  orgId: 0,
  perfectAmount: 0,
  unblendedAmout: 0,
});
// 签到表保存
const sign_enter = async () => {
  console.log(info.value);
  console.log(signFrom.value);

  let data = {};
  let method = "";

  // return false
  // 修改
  if (info.value.meetingSigninRep && info.value.meetingSigninRep.id) {
    data = { ...signFrom.value, meetingId: id.value };
    method = "put";
  } else {
    //新增
    data = {
      host: signFrom.value.host,
      location: signFrom.value.location,
      meetingId: info.value.id,
      // meetingTime: info.value.meetingTime,
      meetingTime: signFrom.value.meetingTime,
      // number:signFrom.value,
      objective: signFrom.value.objective,
      orgId: info.value.orgId,
      perfectAmount: signFrom.value.perfectAmount,
      unblendedAmout: signFrom.value.unblendedAmout,
    };
    method = "post";
  }

  const res = await http.corsApi("/meetingSignin", method, data);
  console.log(res);
  if (res.data) {
    layer.confirm("修改成功", { icon: 1 });
    await get_mett_detail(id.value);
    dialogVisible.value = false;
  }
};
const sign_close = async () => {
  await get_mett_detail(id.value);
  dialogVisible.value = false;
};
// 获取会议详情
const get_mett_detail = async (id) => {
  const res = await http.corsApi(`smokeMeeting/${id}`, "get", {}, { is_msg: false });
  // console.log("*************************",res.data);
  if (res.data) {
    res.data.meetingAllRepList.map((item) => {
      item["is_btn_name"] = "开始评吸";
      // isStatus =0   '开始评吸'     = 1投屏|详情
      item["isStatus"] = "0";
    });
    info.value = res.data;

    if (res.data.meetingSigninRep) {
      signFrom.value = res.data.meetingSigninRep;
    }
  }
};

const orgList = ref([]);
// 获取部门列表
const get_org_list_tree = async () => {
  // const res = await http.corsApi("/secOrg/getOrgAllTreeData", "get", {});
  const res = await http.corsApi("/secOrg", "get", {});
  console.log(res);
  orgList.value = res.data;
};
</script>

<style scoped lang="scss">
.setting {
  position: relative;
  width: 100%;
  height: 100%;
  .herder {
    padding: 25px;
    box-sizing: border-box;
    background-color: #fff;
    .id {
      margin-top: 10px;
      span {
        margin-right: 10px;
      }
    }
    .type {
      margin-top: 10px;

      li {
        margin-right: 10px;
      }
    }
  }
  .content {
    padding: 25px;
    box-sizing: border-box;
    ul {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      // li:nth-child(1) {
      //   margin-left: 0;
      // }

      li {
        // float: left;
        // margin-left: 50px;
        cursor: pointer;
        width: 300px;
        height: 180px;
        background-color: #fff;
        margin-bottom: 50px;
        margin-right: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #cbcbcb;
        box-sizing: border-box;
        padding-left: 8px;
        position: relative;
        .mouse-enter {
          font-size: 36px;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          background-color: #fff;
          height: 100%;
          .status-1 {
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              height: 100%;
              width: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            span:nth-child(1) {
              border-right: 1px solid #cbcbcb;
            }
          }
        }
        > div {
          &:nth-child(1) {
            > div:nth-child(1) {
              font-size: 36px;
              text-align: center;
            }
            > div:nth-child(2) {
              margin-top: 10px;
            }
          }
          img {
            width: 104px;
            height: 104px;
          }
        }

        .content-status {
          position: absolute;
          top: 0;
          right: 0;
          width: 20%;
          height: 15%;
          display: flex;
          justify-content: center;
          align-items: center;
          // background-color: #000;
        }
      }
    }
  }
}

.sign-setting {
  width: 100%;
  height: 100%;
  h1 {
    background-color: #fff;
    font-size: 24px;
    padding: 20px 0 80px 30px;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    color: #000;
  }

  .content {
    background-color: #f0f2f5;
    width: 100%;
    height: 100%;
    table {
      text-align: center;
      background-color: #fff;
      tr {
        td {
          padding: 8px 12px;
          width: 200px;
          input {
            width: 100%;
            height: 100%;
            border: 0 none;
            text-align: center;
          }
        }
      }
      .selece {
        :deep(.layui-input) {
          border: 0 none;
          .layui-icon {
            display: none;
          }
          input {
            text-align: center;
          }
        }
      }
      .time {
        :deep(.layui-input) {
          border: 0 none;
          .layui-icon {
            display: none;
          }
          input {
            text-align: center;
          }
        }
      }
    }
  }
}

:deep(.el-overlay-dialog) {
  position: absolute !important;
}
:deep(.el-overlay) {
  position: absolute !important;
}
:deep(.el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-dialog) {
  width: 100%;
  height: calc(100% - 0px);
  margin: 0;
  padding: 0;
}
:deep(.el-dialog__body) {
  height: 82%;
}
</style>

 